<!doctype html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
<title>日常保洁</title>
<style>
/*service服务*/
.service_box{ height:48px; position:relative; margin-top:14px; padding-top:7px;box-sizing:border-box}
.service{ width:92%; height:33px; line-height:33px; color:#191919; border:1px solid #d3d3d3; border-radius:3px; box-sizing:border-box; text-align:center; font-size:14px;margin:auto;}
.add_service{ clear:both; line-height:37px; height:37px; width:20%; margin-left:40%; position:relative; text-align:center;}
/*合计*/
.total_box{ height:88px; box-sizing:border-box}
.total_box h1{ font-size:12px; text-align:center; line-height:37px; color:#65646b;}
.total_box p{ font-size:22px; color:#c40000; text-align:center; line-height:33px; margin-bottom:90px;}
/*address地址*/
.address{ padding-left:4%; position:relative; background-color:#fff; padding-top:9px; padding-bottom:9px; box-sizing:border-box}
.address img{ float:left; margin-top:14px; width:18px; height:auto}
.address_text{ float:left; margin-left:12px;}
.address h1{ font-size:14px; line-height:21px; color:#191919;}
.address h2{ font-size:14px; line-height:18px; color:#65646b;}
.address h3{ font-size:14px; line-height:18px; color:#b2bab8;}
/*选择房屋面积*/
.area_box{ height:203px; background-color:#fff; position:relative; margin-top:14px;}
.area_box h1{ padding-left:4%;color:#65646b; font-size:14px; line-height:46px;}
.area{ width:20%; height:40px; line-height:40px; text-align:center; float:left; margin-left:4%; border:1px solid #ccc; box-sizing:border-box; border-radius:3px; color:#65646b; margin-top:20px;}
.current{ border:1px solid #01aff0; color:#01aff0; background-image:url(images/checkbox.png);background-size: 12px 12px;background-repeat: no-repeat;background-position: right bottom; }
/***********选择服务时间:弹出层**********/
#option_time{ width:100%; height:100%; top:0; right:0; position:absolute; background:#fff;}
.week_box{ height:62px; background-color:#fff; position:relative; margin-bottom:8px;}
.week{ height:62px; width:14.3%; float:left}
.week h1{ line-height:22px; font-size:14px; text-align:center; margin-top:11px;}
.week h2{ line-height:19px; font-size:12px; color:#65646b; text-align:center;}
.blue{ width:14.3%; position:absolute; left:0; bottom:0; height:2px; background-color:#01aff0;}
.time_box{ margin-bottom:80px;}
.time{ width:20%; float:left; margin-left:4%; margin-top:6px; border:1px solid #ccc; border-radius:3px; text-align:center; line-height:40px; height:40px; color:#b2bab8; box-sizing:border-box;}
.option {
    border: 1px solid #01aff0;
    color:#191919;
    background-image:url(images/checkbox.png);
    background-size: 12px 12px;
    background-position: right bottom;
    background-repeat: no-repeat;
}
/*cart底部购物车*/
.cart_box{ position:absolute; bottom:0; left:0; background-color:#f9f9f9; width:100%;}
.cart_title{ padding-left:4%; line-height:33px; color:#191919; position:relative; background-color:#fff;}
.cart_pro{ height:42px;}
.cart_pro h1{ float:left; line-height:42px; margin-left:4%; color:#191919;}
.cart_pro h2{ float:left; line-height:42px; margin-left:20%; color:#c40000; }
.cart_pro img{ float:right; width:20px; height:auto; margin-top:11px;}
.cart_pro p{ float:right; width:25px; height:20px; margin-top:11px; color:#191919; text-align:center}
.cart{ height:47px; position:relative; margin-top:16px; background-color:#fff;}
.cart img{ width:46px; height:46px; position:absolute; left:4%; bottom:17px;}
.sure{ float:right; width:25%; height:47px; background-color:#999; color:white; line-height:47px; text-align:center; font-size:18px;}
.cart p{ color:#c40000; font-size:18px; line-height:47px; float:right; margin-right:6px;}
.cart h1{ color:#191919; font-size:14px; line-height:47px; float:right}
.number{ position:absolute; left:4%; top:-15px; margin-left:34px; height:18px; width:18px; background-color:#c40000; border-radius:50%; line-height:18px; text-align:center; color:white; font-size:12px;}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">保洁
	<div class="header_left" onclick="window.history.go(-1)"><img src="images/return.png"></div>
    <div class="header_right" id="open_sta" onClick="statement()">免责声明</div>
</div>
<!--column服务地址-->
<div class="column_box" onclick="document.location='address?sid=1';">
	<div class="border_top"></div>
	<div class="column_img"><img src="images/adrress.png"></div>
    @if($id=="")
    <p>请选择服务地址</p>
    @else
    <p>已选择</p>
    <input type="hidden" id="ids" value="{{$id}}">
    @endif
    <div class="next"><img src="images/arrow.png"></div>
    <div class="border_bottom"></div>
</div>

<!--选择房屋面积-->
<div class="area_box">
<div class="column_box" >
	<div class="border_top"></div>
	<div class="column_img"><img src="images/area.fw.png"></div>
    <p>请选择房屋面积（㎡）</p>

</div>
<div style=" width:92%; border-top:1px #cccccc solid; margin:auto;"></div>
    <div class="area" onclick="dianji(100)">100</div>
    <div class="area" onclick="dianji(130)">130</div>
    <div class="area" onclick="dianji(160)">160</div>
    <div class="area" onclick="dianji(200)">200</div>
    <div class="area" onclick="dianji(260)">260</div>
    <div class="area" onclick="dianji(380)">380</div>
    <div class="area" onclick="dianji(500)">500</div>
    <input type="hidden" value="" id="shuju"/>
    <div class="area"  style="padding-left:20px"><input type="number" placeholder="请输入" style="width:60px;height:30px" id="num"/></div>
    <div class="border_bottom"></div>
    <h3 style=" position:absolute;right:4%; bottom:10px; color:#C0C3C3">30-50元/小时，1元/平方</h3>
</div>
<!--column服务时间-->
<div class="column_box column_ron" style="margin-top:14px;">
	<div class="border_top"></div>
	<div class="column_img"><img src="images/time.png"></div>
    <p id="atext">请选择服务时间</p><span id="btext" style="margin-left:10px; color:#65646b"></span>
    <div class="next"><img src="images/arrow.png"></div>
    <div class="border_bottom"></div>
</div>
<!--service_box服务-->
<div class="service_box">
	<div class="service checkbox" style=" border:1px solid #01AFF0; background:#fff;">基础服务
    </div>
</div>
<!--合计-->
<div class="total_box">
	<h1>合计：</h1>
    <p>￥<scan style="font-size:33px;">0</scan><scan style="font-size:19px;">.0</scan></p>
</div>
<!--confirm提交订单-->
<div class="confirm_box">
	<div class="confirm" id="submit">提交订单</div>
</div>
<!--免责声明-->
<div class="black" id="black"></div>
<div class="statement" id="statement">
	<div class="statement_header">免责声明
    	<div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="images/close.png">
    <div class="statement_text">
    	<h1>1.什么是优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>2.优惠券如何使用？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>3.如何获得优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>4.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>5.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
    	<h1>6.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
</div>
<!--服务标准-->
<div class="standard">
	<div class="standard_header">服务基础
    	<div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="images/close.png">
    <div class="standard_text">
    	<h2>客厅</h2>
    	<h1>窗户</h1>
        <p>窗户玻璃无污尘，窗槽干净，无污痕</p>
    </div>
    <div class="standard_text">
    	<h1>客厅及茶几</h1>
        <p>沙发靠垫、靠枕摆放整齐，底部清扫干净，无毛发、无杂物，茶几内茶具摆放整齐，茶水桶倾倒干净，烟灰缸倾倒、刷洗干净后，垫纸、滴水沾湿</p>
    </div>
    <div class="standard_text">
    	<h1>地面</h1>
        <p>地面干净、无水痕、无污痕。玩具、鞋子、凳子等物品要挪起清洁后整齐归位</p>
    </div>
    <div class="standard_text">
    	<h1>鞋柜</h1>
        <p>鞋子统一朝向摆放整齐</p>
    </div>
    <div class="standard_text">
    	<h1>垃圾桶</h1>
        <p>垃圾桶倾倒后，刷洗干净，套上干净的塑料袋</p>
    </div>
    <div class="standard_text">
         <h2>厨房
            <div class="border_bottom"></div>
        </h2>
    	<h1>油烟机</h1>
        <p>油烟机顶部、油烟机机盒、油烟机下部均无油污</p>
    </div>
</div>
<!-------------请选择服务时间：弹出层------------->
<div id="option_time">
	<!--header顶部标题-->
    <div class="header">请选择上门时间
    	<div class="header_left" onclick="window.history.go(-1)"><img src="images/return.png"></div>
    </div>
    <div class="week_box" >
{{--        <div class="week">
            <h1>今天</h1>
            <h2>约满</h2>
        </div>
        <div class="week">
            <h1>明天</h1>
            <h2>约满</h2>
        </div>
        <div class="week">
            <h1>周四</h1>
            <h2>约满</h2>
        </div>
        <div class="week">
            <h1>周五</h1>
            <h2>可选</h2>
        </div>
        <div class="week">
            <h1>周六</h1>
            <h2>可选</h2>
        </div>
        <div class="week">
            <h1>周日</h1>
            <h2>可选</h2>
        </div>--}}
        @foreach($roo as $v)
        <div class="week"  style="width:14.2%;">
            <h1> <span class="hhh">{{$v}}</span> </h1>
            @if($rows !== null)
            <h2>可选</h2>
            @else
            <h2>约满</h2>
            @endif
        </div>
        <div class="blue"></div>
        <div class="border_bottom"></div>
        @endforeach
    </div>
    <div class="time_box" id="option_box">
        @for($i = 0 ; $i < count($res) ; $i++)
        <div class="time">{{$res[$i]}}</div>
        @endfor
    </div>
    <!--confirm提交订单时间-->
    <div class="confirm_box" onclick="confirm()">
        <div class="confirm" style=" background-color:#FF7F00" >确定</div>
    </div>
</div>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
//选择房屋面积
$(".area").click(function(){$(this).addClass("current").siblings().removeClass("current");})
//隐藏免责声明、服务标准
document.getElementById('black').style.display="none";
document.getElementById('statement').style.display="none";
//点击免责声明按钮，显示免责声明
function statement(){
	document.getElementById('black').style.display="block";
	document.getElementById('statement').style.display="block";
	}
//点击关闭按钮，关闭免责声明
function close_sta(){
	document.getElementById('black').style.display="none";
	document.getElementById('statement').style.display="none";
	$(".standard").hide();
	}
$(".service").click(
	function(){
		$(this).toggleClass("checkbox");
		}
)
//隐藏服务地址
$(".address").hide();
$(".standard").hide();
//点击基础服务
$(".service").eq(0).click(
	function(){
		document.getElementById('black').style.display="block";
		$(".standard").show();
		}
)

//时间

var hhh= $('.hhh').text();
var ar=[];
 ar[0]=hhh.substr(0,3);
 ar[1]=hhh.substr(3,3);
 ar[2]=hhh.substr(6,3);
 ar[3]=hhh.substr(9,3);
 ar[4]=hhh.substr(12,3);
 ar[5]=hhh.substr(15,3);
 ar[6]=hhh.substr(18,3);

//选择时间弹出层
// var ar=["今天","明天","周四","周五","周六","周日","周一",]
var arr=["8:00","8:30","9:00","9:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30"]
var atext=document.getElementById("atext");
var btext=document.getElementById("btext");
var        week=document.getElementsByClassName("week");
var        time=document.getElementsByClassName("time")
//隐藏选择时间
var off=1;
$("#option_time").hide();
$(".column_ron").click(
						function(){$("#option_time").show();
						if(off){ atext.innerHTML="今天";btext.innerHTML="8:00";off=0;}
						})//显示选择时间
$(".confirm").click(function(){$("#option_time").hide()})//隐藏选择时间
$(".header_left").click(function(){$("#option_time").hide()})
//选择几号:点击日期，边框滑动
$(".week:eq(0)").click(function(){$(".blue").animate({left:"0%"});});
$(".week:eq(1)").click(function(){$(".blue").animate({left:"14.3%"})});
$(".week:eq(2)").click(function(){$(".blue").animate({left:"28.6%"});});
$(".week:eq(3)").click(function(){$(".blue").animate({left:"42.9%"})});
$(".week:eq(4)").click(function(){$(".blue").animate({left:"57.2%"});});
$(".week:eq(5)").click(function(){$(".blue").animate({left:"71.5%"})});
$(".week:eq(6)").click(function(){$(".blue").animate({left:"85.7%"});});
for(i=0;i<week.length;i++){
		week[i].index=i;
		week[i].onclick=function(){
			atext.innerHTML="<p>"+ar[this.index]+"</p>";
			}
	}

//选择具体时间
var option_box=document.getElementById("option_box");
var time=option_box.getElementsByTagName("div");
$(time).click(function(){$(this).addClass("option").siblings().removeClass("option");})
for(x=0;x<time.length;x++){
		time[x].index=x;
		time[x].onclick=function(){
			btext.innerHTML="<span>"+arr[this.index]+"</span>";
			}
	}
function confirm() {
alert(1);
die();
}

function dianji(id){
    $("#shuju").val(id);
};
$("#submit").click(
    function(){
        var btext=$('#btext').text();
        var shuju= $("#shuju").val();
        var num=$('#num').val();
        var ids=$('#ids').val();
        if(ids==""){
            alert('您还未选中地址');
            return;
        }
        if(btext==""){
            alert('您还未选中服务时间');
            return;
        }
        var total = '';
        if(num != ""){
          total = num;
        }else{
          total = shuju;
        }
        if(total==""){
            alert('您还未选中房屋面积');
            return;
        }
        $.ajax({
            type:"post",
            url: "affirm_order",
            data: {
                'shuju':total,
                'btext':btext,
                'ids':ids,
            },
            success:function(data){
                if(data=='1'){
                    document.location="affirm_order";
                }
            }
        });
    });

</script>
</body>
</html>
